<!doctype html>

<html lang="zh-CN">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Account Manager</title>

    <link rel="stylesheet" type="text/css" href="/form/rest/webjars/extjs/4.2.1.883/resources/css/ext-all.css"/>

    <!--<link href="/form/rest/webjars/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>-->

    <script src="/form/rest/webjars/extjs/4.2.1.883/bootstrap.js"></script>

    <!--<script type="text/javascript" src="app.js"></script>-->
</head>
<body>

<script type="text/javascript">
    Ext.define("Custom.AddBigButton", {
        extend: "Ext.Button",
        stateful: false,
        minWidth: 50,
        text: "新增",
        icon: "new.png",
        iconAlign: 'top',
        scale: 'medium'
    });
    Ext.define("Custom.AddSmallButton", {
        extend: "Ext.Button",
        stateful: false,
        minWidth: 75,
        text: "新增",
        icon: "new_min.png",
        iconAlign: 'left',
        scale: 'small'
    });

    Ext.onReady(function () {
        Ext.create('Custom.AddSmallButton', {renderTo: Ext.getBody()});
    });


    Ext.define("Custom.editWindow", {
        extend: "Ext.window.Window",
        layout: "fit",
        width: 500,
        height: 400,
        frame: false,
        constrain: true,
        modal: true,
        autoScroll: false,
        resizable: false,
        closeAction: "hide",
        buttonAlign: "center",
        initComponent: function () {//构造函数
            var me = this;
            var btnSave = Ext.create('Ext.Button', {text: '保存'});
            var btnClose = Ext.create('Ext.Button', {text: '关闭'}); //创建2个按钮

            me.buttons = [btnSave, btnClose]; //添加到窗体的buttons中

            var listStore = Ext.create('Ext.data.Store', {//创建一个store
                fields: ['name', 'email', 'phone'],
                data: {
                    'items': [
                        {'name': 'Lisa', "email": "lisa@simpsons.com", "phone": "555-111-1224"},
                        {'name': 'Bart', "email": "bart@simpsons.com", "phone": "555-222-1234"},
                        {'name': 'Homer', "email": "home@simpsons.com", "phone": "555-222-1244"},
                        {'name': 'Marge', "email": "marge@simpsons.com", "phone": "555-222-1254"}
                    ]
                },
                proxy: {
                    type: 'memory',
                    reader: {
                        type: 'json',
                        root: 'items'
                    }
                }
            });
            var grid = Ext.create('Ext.grid.Panel', {//创建一个grid
                store: listStore,
                columns: [{header: 'Name', dataIndex: 'name'},
                    {header: 'Email', dataIndex: 'email', flex: 1},
                    {header: 'Phone', dataIndex: 'phone'}],
                height: 200,
                width: 400
            });

            //me.items = [grid]; //将grid添加窗体的items中

            var mainGrid = Ext.create('KitchenSink.view.grid.CellEditing');

            me.items = [mainGrid];

            btnClose.on("click", function () {
                me.hideMe();
            }); //关闭按钮绑定后面定义的hideme函数

            me.superclass.initComponent.call(me); //调用父类的构造函数
        },
        hideMe: function () {
            var me = this;
            me.hide();
        }
    });
    Ext.onReady(function () {
        //    Ext.create('Custom.editWindow').show();

        Ext.create('Custom.editWindow', {title: '我是标题'}).show(); //创建并设置属性
    });


    Ext.define("JsHelper", {
        statics: {//标识这里面的是静态函数
            alert: function (title, content) {
                Ext.Msg.alert(content, content);
            }
        }
    });
    Ext.onReady(function () {

        JsHelper.alert("我是标题", "我是内容");//直接通过名称调用
    });


    Ext.define('KitchenSink.model.grid.Plant', {
        extend: 'Ext.data.Model',
        fields: [
            // the 'name' below matches the tag name to read, except 'availDate'
            // which is mapped to the tag 'availability'
            {name: 'common', type: 'string'},
            {name: 'botanical', type: 'string'},
            {name: 'light'},
            {name: 'price', type: 'float'},
            // dates can be automatically converted by specifying dateFormat
            {name: 'availDate', mapping: 'availability', type: 'date', dateFormat: 'm/d/Y'},
            {name: 'indoor', type: 'bool'}
        ]
    });

    Ext.define('KitchenSink.view.grid.CellEditing', {
        extend: 'Ext.grid.Panel',

        requires: [
            'Ext.selection.CellModel',
            'Ext.grid.*',
            'Ext.data.*',
            'Ext.util.*',
            'Ext.form.*'
        ],
        xtype: 'cell-editing',


        title: 'Edit Plants',
//        frame: true,
        layout: "border",


        //renderTo: Ext.getBody(),


        initComponent: function () {
            this.cellEditing = new Ext.grid.plugin.CellEditing({
                clicksToEdit: 1
            });

            Ext.apply(this, {
                width: 680,
                height: 350,
                plugins: [this.cellEditing],
                store: new Ext.data.Store({
                    // destroy the store if the grid is destroyed
                    autoDestroy: true,
                    model: KitchenSink.model.grid.Plant,
                    proxy: {
                        type: 'ajax',
                        // load remote data using HTTP
                        url: 'http://127.0.0.1:9006/form/rest/public/data/plants.xml',
                        // specify a XmlReader (coincides with the XML format of the returned data)
                        reader: {
                            type: 'xml',
                            // records will have a 'plant' tag
                            record: 'plant'
                        }
                    },
                    sorters: [{
                        property: 'common',
                        direction: 'ASC'
                    }]
                }),
                columns: [{
                    header: 'Common Name',
                    dataIndex: 'common',
                    flex: 1,
                    editor: {
                        allowBlank: false
                    }
                }, {
                    header: 'Light',
                    dataIndex: 'light',
                    width: 130,
                    editor: new Ext.form.field.ComboBox({
                        typeAhead: true,
                        triggerAction: 'all',
                        selectOnTab: true,
                        store: [
                            ['Shade', 'Shade'],
                            ['Mostly Shady', 'Mostly Shady'],
                            ['Sun or Shade', 'Sun or Shade'],
                            ['Mostly Sunny', 'Mostly Sunny'],
                            ['Sunny', 'Sunny']
                        ],
                        lazyRender: true,
                        listClass: 'x-combo-list-small'
                    })
                }, {
                    header: 'Price',
                    dataIndex: 'price',
                    width: 70,
                    align: 'right',
                    renderer: 'usMoney',
                    editor: {
                        xtype: 'numberfield',
                        allowBlank: false,
                        minValue: 0,
                        maxValue: 100000
                    }
                }, {
                    header: 'Available',
                    dataIndex: 'availDate',
                    width: 95,
                    renderer: Ext.util.Format.dateRenderer('M d, Y'),
                    editor: {
                        xtype: 'datefield',
                        format: 'm/d/y',
                        minValue: '01/01/06',
                        disabledDays: [0, 6],
                        disabledDaysText: 'Plants are not available on the weekends'
                    }
                }, {
                    xtype: 'checkcolumn',
                    header: 'Indoor?',
                    dataIndex: 'indoor',
                    width: 90,
                    stopSelection: false
                }, {
                    xtype: 'actioncolumn',
                    width: 30,
                    sortable: false,
                    menuDisabled: true,
                    items: [{
                        icon: 'resources/images/icons/fam/delete.gif',
                        tooltip: 'Delete Plant',
                        scope: this,
                        handler: this.onRemoveClick
                    }]
                }],
                selModel: {
                    selType: 'cellmodel'
                },
                tbar: [{
                    text: 'Add Plant',
                    scope: this,
                    handler: this.onAddClick
                }]
            });

            this.callParent();

            this.on('afterlayout', this.loadStore, this, {
                delay: 1,
                single: true
            })
        },

        loadStore: function () {
            this.getStore().load({
                // store loading is asynchronous, use a load listener or callback to handle results
                callback: this.onStoreLoad
            });
        },

        onStoreLoad: function () {
            Ext.Msg.show({
                title: 'Store Load Callback',
                msg: 'store was loaded, data available for processing',
                icon: Ext.Msg.INFO,
                buttons: Ext.Msg.OK
            });
        },

        onAddClick: function () {
            // Create a model instance
            var rec = new KitchenSink.model.grid.Plant({
                common: 'New Plant 1',
                light: 'Mostly Shady',
                price: 0,
                availDate: Ext.Date.clearTime(new Date()),
                indoor: false
            });

            this.getStore().insert(0, rec);
            this.cellEditing.startEditByPosition({
                row: 0,
                column: 0
            });
        },

        onRemoveClick: function (grid, rowIndex) {
            this.getStore().removeAt(rowIndex);
        }
    });
//
//    Ext.QuickTips.init();
//    //    Ext.create('KitchenSink.view.grid.CellEditing',{
//    //        renderTo:Ext.getBody()//其它的配置项用你这个控件的默认值就可以了
//    //    });
//
//    var mainGrid = Ext.create('KitchenSink.view.grid.CellEditing');
//
//    mainGrid.render(Ext.getBody());

</script>

</body>
</html>